<%@ tag pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ attribute name="url" required="true" type="java.lang.String" %>
<%@ attribute name="dynamicalID" required="true" type="java.lang.String" %>
<%@ attribute name="callBackFunction" required="true" type="java.lang.String" %>
<%@ attribute name="data" required="true" type="java.lang.String" %>
<%@ attribute name="isLoad" type="java.lang.Boolean" %>


<script type="text/javascript">
$(function () {
    /**前台传过来AJAX分页的URL(不能用&携带参数的URL)*/
    var url = '${pageScope.url}';
    /**处理AJAX请求成功后返回的json数据的方法名*/
    var callBackFunction = '${pageScope.callBackFunction}';
    /**传过来的字符串，每次调用AJAX分页的时候必须传不同的值，用来合成动态ID*/
    var dynamicalID = '${pageScope.dynamicalID}';
    /**默认请求传入的参数*/
    var data = {pageIndex:1,pageSize:10};
    <c:if test="${not empty pageScope.data}">
        data = ${pageScope.data};
    </c:if>
    <c:if test="${empty pageScope.isLoad || pageScope.isLoad}">
        postAjaxPage(dynamicalID,url, callBackFunction,data);
    </c:if>

    /**上一页按钮事件*/
    $("#_prePage" + dynamicalID).off("click").on('click', function (e) {
        e.preventDefault();
        var currentPage = $("#_currentPage" + dynamicalID).val() * 1;
        /**当前页已经是第一页就返回*/
        if (currentPage == 1) {
            return;
        }
        var data = JSON.parse($("#_data" + dynamicalID).val());
        data.pageIndex = currentPage - 1;
        postAjaxPage(dynamicalID,url,callBackFunction,data);
    });

    /**下一页按钮事件*/
    $("#_nextPage" + dynamicalID).off("click").on('click', function (e) {
        e.preventDefault();
        var currentPage = $("#_currentPage" + dynamicalID).val() * 1;
        var totalPages = $("#_totalPages" + dynamicalID).val() * 1;
        /**当前页已经是最后一页就返回*/
        if (currentPage == totalPages) {
            return;
        }
        var data = JSON.parse($("#_data" + dynamicalID).val());
        data.pageIndex = currentPage + 1;
        postAjaxPage(dynamicalID,url,callBackFunction,data);
    });

    /**首页事件*/
    $("#_firstPage" + dynamicalID).off("click").on('click', function (e) {
        e.preventDefault();
        var currentPage = $("#_currentPage" + dynamicalID).val() * 1;
        /**当前页已经是第一页就返回*/
        if (currentPage == 1) {
            return;
        }
        var data = JSON.parse($("#_data" + dynamicalID).val());
        data.pageIndex = 1;
        postAjaxPage(dynamicalID,url,callBackFunction,data);
    });
    /**尾页事件*/
    $("#_lastPage" + dynamicalID).off("click").on('click', function (e) {
        e.preventDefault();
        var currentPage = $("#_currentPage" + dynamicalID).val() * 1;
        var totalPages = $("#_totalPages" + dynamicalID).val() * 1;
        /**当前页已经是最后一页就返回*/
        if (currentPage == totalPages) {
            return;
        }
        var data = JSON.parse($("#_data" + dynamicalID).val());
        data.pageIndex = totalPages;
        postAjaxPage(dynamicalID,url,callBackFunction,data);
    });

    /**点击跳转按钮跳页事件*/
    $("#_gotoPageBtn" + dynamicalID).off("click").on('click', function (e) {
        e.preventDefault();
        var currentPage = $("#_currentPage" + dynamicalID).val() * 1;
        var totalPages = $("#_totalPages" + dynamicalID).val() * 1;
        /**输入框中输入页码*/

        var num = $("#_pageIndex" + dynamicalID).val() * 1;

        if (isNaN(num)) {
            $("#_pageIndex" + dynamicalID).val(currentPage);
            return;
        }
        /**输入页码小于1把页码置1*/
        if (num < 1) {
            num = 1;
            $("#_pageIndex" + dynamicalID).val(num);
        }
        /**输入页码大于总页码把页码置为总页码*/
        if (num > totalPages) {
            num = totalPages;
            $("#_pageIndex" + dynamicalID).val(num);
        }
        /**输入页码等于当前页就返回*/
        if (num == currentPage) {
            return;
        }
        var data = JSON.parse($("#_data" + dynamicalID).val());
        data.pageIndex = num;
        postAjaxPage(dynamicalID,url,callBackFunction,data);
    });
    /**输入框中输入页码直接回车事件，和跳转按钮事件一样*/
    $("#_pageIndex" + dynamicalID).off("click").on('keypress', function (e) {
        e = e || event;
        var k = window.event ? e.keyCode : e.which
        if (k == 13 || k == 108) {
            var currentPage = $("#_currentPage" + dynamicalID).val() * 1;
            var totalPages = $("#_totalPages" + dynamicalID).val() * 1;
            /**输入框中输入页码*/

            var num = $(this).val() * 1;

            if (isNaN(num)) {
                $(this).val(currentPage);
                return;
            }
            /**输入页码小于1把页码置1*/
            if (num < 1) {
                num = 1;
                $(this).val(num);
            }
            /**输入页码大于总页码把页码置为总页码*/
            if (num > totalPages) {
                num = totalPages;
                $(this).val(num);
            }
            /**输入页码等于当前页就返回*/
            if (num == currentPage) {
                return;
            }
            var data = JSON.parse($("#_data" + dynamicalID).val());
            data.pageIndex = num;
            postAjaxPage(dynamicalID,url,callBackFunction,data);
        }
    });

    $("._page_num" + dynamicalID).off("click").on('click', function (e) {
        e.preventDefault();
        var data = JSON.parse($("#_data" + dynamicalID).val());
        data.pageIndex = $(this).html()*1;
        postAjaxPage(dynamicalID,url,callBackFunction,data);
    });
});
</script>

<div id="_page${pageScope.dynamicalID}" class="row page-paging" style="display: none">
    <div class="col-xs-3">
        <div class="tables-info" id="_pageInfo${pageScope.dynamicalID}">

        </div>
    </div>
    <div class="col-xs-9">
        <div class="tables-paginate paging_bootstrap">
            <ul class="pagination  pull-right">
                <li class="prev">
                    <a href="javascript:void(0);" id="_firstPage${pageScope.dynamicalID}">
                        <i class="fa fa-angle-double-left"></i>
                    </a>
                </li>
                <li class="prev">
                    <a href="javascript:void(0);" id="_prePage${pageScope.dynamicalID}">
                        <i class="fa fa-angle-left"></i>
                    </a>
                </li>

                <li><a href="javascript:void(0);" class="_page_num${pageScope.dynamicalID}"></a></li>
                <li><a href="javascript:void(0);" class="_page_num${pageScope.dynamicalID}"></a></li>
                <li><a href="javascript:void(0);" class="_page_num${pageScope.dynamicalID}"></a></li>

                <li class="next">
                    <a href="javascript:void(0);" id="_nextPage${pageScope.dynamicalID}">
                        <i class="fa fa-angle-right"></i>
                    </a>
                </li>
                <li class="next">
                    <a href="javascript:void(0);" id="_lastPage${pageScope.dynamicalID}">
                        <i class="fa fa-angle-double-right"></i>
                    </a>
                </li>
                &nbsp; 到第
                <input type="text" id="_pageIndex${pageScope.dynamicalID}" class="goto-page-input" size="3" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"/> 页
                <input type="button" id="_gotoPageBtn${pageScope.dynamicalID}" class="btn btn-xs btn-primary" value="跳 转"/>
            </ul>

        </div>
    </div>
    <input type="hidden" id="_currentPage${pageScope.dynamicalID}">
    <input type="hidden" id="_totalPages${pageScope.dynamicalID}">
    <input type="hidden" id="_data${pageScope.dynamicalID}">
    <input type="hidden" id="_url${pageScope.dynamicalID}">
    <input type="hidden" id="_callBackFunction${pageScope.dynamicalID}">
</div>